Sigurnosni Zaglavci Frontend-a: Ovladavanje Politikom Sadržaja (CSP)

U današnjem digitalnom krajoliku, gdje su web aplikacije sve složenije i međusobno povezane, zaštita od sigurnosnih prijetnji je od primarne važnosti. Dok backend sigurnost često dobiva značajnu pozornost, frontend sigurnost je jednako ključna. Sigurnosni zaglavci frontend-a djeluju kao prva linija obrane, pružajući mehanizam za upućivanje preglednika kako da se ponaša i štiti korisnike od raznih napada. Među tim zaglavcima, Politika Sadržaja (CSP) ističe se kao snažan alat za ublažavanje širokog spektra rizika.

Što su Sigurnosni Zaglavci Frontend-a?

Sigurnosni zaglavci frontend-a su HTTP zaglavci odgovora koje web poslužitelj šalje pregledniku. Ovi zaglavci sadrže upute o tome kako preglednik treba rukovati primljenim sadržajem. Oni pomažu u sprječavanju uobičajenih napada kao što su:

• Cross-Site Scripting (XSS): Ubacivanje zlonamjernih skripti u povjerljive web stranice.
• Clickjacking: Varajući korisnike da kliknu na nešto drugačije od onoga što percipiraju.
• Man-in-the-Middle Napadi: Presretanje komunikacije između korisnika i poslužitelja.

Neki od najvažnijih sigurnosnih zaglavaka frontend-a uključuju:

• Politika Sadržaja (CSP): Definira izvore iz kojih preglednik smije učitavati resurse.
• Strict-Transport-Security (HSTS): Prisiliti preglednik da koristi HTTPS za svu komunikaciju s web stranicom.
• X-Frame-Options: Sprječava ugrađivanje web stranice u iframe, ublažavajući clickjacking napade.
• X-XSS-Protection: Omogućuje ugrađeni XSS filtar preglednika. (Napomena: Često ga zamjenjuje CSP, ali još uvijek može pružiti sloj obrane).
• Referrer-Policy: Kontrolira količinu informacija o upućivaču poslanih sa zahtjevima.
• Feature-Policy (sada Permissions-Policy): Omogućuje razvojnim programerima da selektivno omogućuju i onemogućuju značajke i API-je preglednika.

Udubljivanje u Politiku Sadržaja (CSP)

Politika Sadržaja (CSP) je HTTP zaglavak odgovora koji kontrolira resurse koje korisnički agent smije učitati za određenu stranicu. U suštini navodi izvore odobrenog sadržaja, značajno smanjujući rizik od XSS napada. Eksplicitnim definiranjem izvora iz kojih se mogu učitati resursi kao što su skripte, stilovi, slike i fontovi, CSP znatno otežava napadačima ubacivanje zlonamjernog koda u vašu web stranicu.

Kako Funkcionira CSP

CSP radi tako što pregledniku pruža popis odobrenih izvora za različite vrste sadržaja. Kada preglednik naiđe na resurs koji krši CSP, blokira resurs i prijavljuje kršenje. Ovaj mehanizam blokiranja sprječava izvršavanje zlonamjernog koda, čak i ako ga napadač uspije ubaciti u HTML.

CSP Direktive

CSP direktive su osnovne komponente CSP politike. One specificiraju dopuštene izvore za različite vrste resursa. Neke od najčešće korištenih direktiva uključuju:

• default-src: Postavlja zadani izvor za sve vrste resursa. Ovo je rezervna direktiva koja se primjenjuje kada druge specifičnije direktive nisu definirane.
• script-src: Određuje dopuštene izvore za JavaScript.
• style-src: Određuje dopuštene izvore za CSS stilove.
• img-src: Određuje dopuštene izvore za slike.
• font-src: Određuje dopuštene izvore za fontove.
• media-src: Određuje dopuštene izvore za audio i video.
• object-src: Određuje dopuštene izvore za dodatke poput Flash-a. (Općenito je najbolje izbjegavati dopuštanje dodataka ako je moguće).
• frame-src: Određuje dopuštene izvore za okvire (iframes).
• connect-src: Određuje dopuštene izvore za mrežne zahtjeve (AJAX, WebSockets).
• base-uri: Ograničava URL-ove koji se mogu koristiti u <base> elementu.
• form-action: Ograničava URL-ove na koje se obrasci mogu poslati.
• frame-ancestors: Određuje valjane roditelje koji mogu ugraditi stranicu koristeći <frame>, <iframe>, <object>, <embed>, ili <applet>. Ova direktiva pruža zaštitu od Clickjacking-a.
• upgrade-insecure-requests: Nalaže korisničkim agentima da tretiraju sve nesigurne URL-ove web mjesta (učitane preko HTTP-a) kao da su zamijenjeni sigurnim URL-ovima (učitani preko HTTPS-a). Ova direktiva je namijenjena web stranicama koje su u procesu migracije s HTTP-a na HTTPS.
• report-uri: Određuje URL na koji preglednik treba poslati izvješća o kršenjima CSP-a. Deprecirano u korist `report-to`.
• report-to: Određuje naziv grupe definiran u `Report-To` zaglavlju. Ovo omogućuje precizniju kontrolu nad izvješćivanjem, uključujući definiranje više krajnjih točaka za izvješćivanje.

CSP Vrijednosti Izvora

Vrijednosti izvora definiraju izvore iz kojih se resursi smiju učitavati. Neke uobičajene vrijednosti izvora uključuju:

• *: Dopušta sadržaj iz bilo kojeg izvora (Izbjegavajte ovo koristiti u produkciji!).
• 'self': Dopušta sadržaj iz istog izvora (shema, host i luka) kao i zaštićeni dokument.
• 'none': Zabrani sadržaj iz bilo kojeg izvora.
• 'unsafe-inline': Dopušta korištenje inline JavaScript-a i CSS-a (Izbjegavajte ovo koristiti u produkciji!).
• 'unsafe-eval': Dopušta korištenje dinamičke procjene koda (npr. eval(), Function()) (Izbjegavajte ovo koristiti u produkciji!).
• 'strict-dynamic': Određuje da povjerenje izričito dano skripti prisutnoj u markup-u, prateći je s nonce-om ili hash-om, treba prenijeti na sve skripte učitane od tog pretka.
• 'unsafe-hashes': Dopušta specifične inline rukovatelje događaja. Ovo se općenito ne preporučuje zbog svoje složenosti i ograničene koristi.
• data:: Dopušta učitavanje resursa iz data URL-ova (npr. ugrađene slike). Koristite s oprezom.
• mediastream:: Dopušta da se `mediastream:` URI-ji koriste kao izvor medija.
• blob:: Dopušta da se `blob:` URI-ji koriste kao izvor medija.
• filesystem:: Dopušta učitavanje resursa iz datotečnog sustava.
• https://example.com: Dopušta sadržaj iz specifične domene i porta.
• *.example.com: Dopušta sadržaj iz bilo koje poddomene example.com.
• nonce-{random-value}: Dopušta skripte ili stilove s odgovarajućim nonce atributom. Ovo zahtijeva generiranje slučajnog nonce-a sa strane poslužitelja za svaki zahtjev.
• sha256-{hash-value}: Dopušta skripte ili stilove s odgovarajućim SHA256, SHA384 ili SHA512 hash-om.

CSP Načini Rada: Enforce vs. Report-Only

CSP se može implementirati u dva načina rada:

• Način Enforce: U ovom načinu, preglednik blokira sve resurse koji krše CSP. Ovo je preporučeni način rada za produkcijska okruženja. CSP se šalje pomoću `Content-Security-Policy` zaglavlja.
• Način Report-Only: U ovom načinu, preglednik prijavljuje kršenja CSP-a, ali ne blokira resurse. Ovo je korisno za testiranje i procjenu CSP-a prije njegovog provođenja. CSP se šalje pomoću `Content-Security-Policy-Report-Only` zaglavlja.

Implementacija CSP-a: Vodič Korak po Korak

Implementacija CSP-a može se činiti zastrašujućom, ali slijedeći strukturirani pristup, možete učinkovito osigurati svoju web aplikaciju.

1. Započnite s Politikom Report-Only

Započnite implementacijom CSP-a u načinu rada report-only. Ovo vam omogućuje praćenje kršenja bez prekidanja funkcionalnosti vaše web stranice. Konfigurirajte `report-uri` ili `report-to` direktivu za slanje izvješća o kršenjima na određenu krajnju točku.

Primjer zaglavlja (Report-Only): Content-Security-Policy-Report-Only: default-src 'self'; report-uri /csp-report

2. Analizirajte Izvješća o Kršenjima

Pažljivo analizirajte izvješća o kršenjima kako biste identificirali koji su resursi blokirani i zašto. Ovo će vam pomoći da razumijete ovisnosti resursa vaše web stranice i identificirate potencijalne sigurnosne ranjivosti.

Izvješća o kršenjima obično se šalju kao JSON payload-ovi na konfigurirani `report-uri` ili `report-to` krajnju točku. Ova izvješća sadrže informacije o kršenju, kao što su blokirani URI, povrijeđena direktiva i URI dokumenta.

3. Refinirajte CSP Politiku

Na temelju izvješća o kršenjima, refinirajte svoju CSP politiku kako biste dopustili legitimne resurse, zadržavajući pritom snažan sigurnosni stav. Dodajte specifične vrijednosti izvora za resurse koji se blokiraju. Razmislite o korištenju nonce-ova ili hash-ova za inline skripte i stilove kako biste izbjegli korištenje 'unsafe-inline'.

4. Prijeđite na Način Enforce

Nakon što ste uvjereni da vaša CSP politika ne blokira legitimne resurse, prijeđite na način enforce. Ovo će blokirati sva preostala kršenja i pružiti robustan sloj sigurnosti protiv XSS napada.

Primjer zaglavlja (Enforce): Content-Security-Policy: default-src 'self'; script-src 'self' https://example.com; style-src 'self' 'unsafe-inline'; img-src 'self' data:; report-uri /csp-report

5. Nadgledajte i Održavajte CSP Politiku

CSP nije rješenje za postavljanje i zaboravljanje. Ključno je kontinuirano nadgledati svoju CSP politiku i ažurirati je kako se vaša web stranica razvija i pojavljuju nove sigurnosne prijetnje. Redovito pregledavajte izvješća o kršenjima i prilagođavajte politiku prema potrebi.

Praktični CSP Primjeri

Pogledajmo neke praktične CSP primjere za različite scenarije:

Primjer 1: Osnovni CSP za Jednostavnu Web Stranicu

Ovaj CSP dopušta sadržaj iz istog izvora i dopušta slike iz bilo kojeg izvora.

Content-Security-Policy: default-src 'self'; img-src *

Primjer 2: CSP sa Specifičnim Izvorima Skripti i Stilova

Ovaj CSP dopušta skripte iz istog izvora i s određenog CDN-a, te stilove iz istog izvora i inline stilove.

Content-Security-Policy: default-src 'self'; script-src 'self' https://cdn.example.com; style-src 'self' 'unsafe-inline'

Primjer 3: CSP s Nonce-ovima za Inline Skripte

Ovaj CSP zahtijeva jedinstveni nonce za svaku inline skriptu.

Content-Security-Policy: default-src 'self'; script-src 'self' 'nonce-r4nd0mn0nc3'

HTML:

<script nonce="r4nd0mn0nc3">console.log('Hello, world!');</script>

Važno: Vrijednost nonce-a mora se dinamički generirati na poslužitelju za svaki zahtjev. Ovo sprječava napadače da ponovno koriste nonce.

Primjer 4: CSP Ograničavanje Okvirnih Roditelja za Sprječavanje Clickjackinga

Ovaj CSP sprječava ugrađivanje stranice u iframe na bilo kojoj domeni osim `https://example.com`.

Content-Security-Policy: frame-ancestors 'self' https://example.com

Primjer 5: Restriktivniji CSP koristeći 'strict-dynamic' i rezervnu opciju 'self'

Ovaj CSP koristi `strict-dynamic` za moderne preglednike, istovremeno podržavajući starije preglednike koji ga ne podržavaju. Također uključuje `report-uri` za praćenje kršenja.

Content-Security-Policy: default-src 'self'; script-src 'strict-dynamic' 'nonce-{random-nonce}' 'self'; style-src 'self' 'unsafe-inline'; img-src 'self' data:; report-uri /csp-report

Ne zaboravite zamijeniti `{random-nonce}` dinamički generiranom vrijednosti nonce-a sa strane poslužitelja.

CSP i Aplikacije Jedne Stranice (SPA)

Implementacija CSP-a u SPA-ovima može biti izazovna zbog dinamičke prirode ovih aplikacija. SPA-ovi se često uvelike oslanjaju na JavaScript za generiranje i manipulaciju DOM-a, što može dovesti do CSP kršenja ako se ne rukuje pažljivo.

Evo nekoliko savjeta za implementaciju CSP-a u SPA-ovima:

• Izbjegavajte 'unsafe-inline' i 'unsafe-eval': Ove direktive treba izbjegavati kad god je to moguće u SPA-ovima. Oni značajno slabe sigurnost vaše aplikacije.
• Koristite Nonce-ove ili Hash-ove: Koristite nonce-ove ili hash-ove za inline skripte i stilove. Ovo je preporučeni pristup za SPA-ove.
• Razmislite o Trusted Types: Trusted Types je API preglednika koji pomaže u sprječavanju DOM-baziranih XSS ranjivosti. Može se koristiti u kombinaciji s CSP-om za daljnje poboljšanje sigurnosti.
• Koristite okvir kompatibilan s CSP-om: Neki frontend okviri (kao što je React s određenim konfiguracijama, Angular i Vue.js) pružaju značajke koje vam pomažu lakše implementirati CSP.

Ostali Važni Sigurnosni Zaglavci Frontend-a

Iako je CSP temelj frontend sigurnosti, drugi zaglavci igraju ključnu ulogu u pružanju sveobuhvatne strategije obrane:

Strict-Transport-Security (HSTS)

Strict-Transport-Security (HSTS) zaglavlje upućuje preglednik da uvijek koristi HTTPS za povezivanje s web stranicom. Ovo sprječava man-in-the-middle napade koji pokušavaju spustiti vezu na HTTP.

Primjer zaglavlja: Strict-Transport-Security: max-age=31536000; includeSubDomains; preload

• max-age: Određuje trajanje (u sekundama) tijekom kojeg preglednik treba zapamtiti da pristupa web mjestu samo putem HTTPS-a. Vrijednost od 31536000 sekundi (1 godina) preporučuje se za produkcijska okruženja.
• includeSubDomains: Pokazuje da se HSTS politika primjenjuje na sve poddomene domene.
• preload: Omogućuje da domena bude uključena u popis HSTS-om aktiviranih domena koje su unaprijed učitane u preglednike. Ovo zahtijeva slanje vaše domene na popis unaprijed učitanih HSTS-ova koje održava Google.

X-Frame-Options

X-Frame-Options zaglavlje sprječava clickjacking napade kontrolirajući može li se web stranica ugraditi u iframe.

Primjer zaglavlja: X-Frame-Options: DENY

Moguće vrijednosti:

• DENY: Sprječava prikaz stranice u iframe-u, bez obzira na izvor.
• SAMEORIGIN: Dopušta prikaz stranice u iframe-u samo ako izvor iframe-a odgovara izvoru stranice.
• ALLOW-FROM uri: Dopušta prikaz stranice u iframe-u samo ako izvor iframe-a odgovara navedenom URI-ju. Napomena: Ova opcija je zastarjela i možda neće biti podržana u svim preglednicima.

Napomena: frame-ancestors direktiva u CSP-u pruža fleksibilniji i moćniji način kontrole uokvirivanja i općenito je preferirana u odnosu na X-Frame-Options.

X-XSS-Protection

X-XSS-Protection zaglavlje omogućuje ugrađeni XSS filtar preglednika. Iako je CSP robusnije rješenje za sprječavanje XSS napada, ovaj zaglavlje može pružiti dodatni sloj obrane, posebno za starije preglednike koji možda ne podržavaju u potpunosti CSP.

Primjer zaglavlja: X-XSS-Protection: 1; mode=block

• 1: Omogućuje XSS filtar.
• 0: Onemogućuje XSS filtar.
• mode=block: Nalaže pregledniku da blokira stranicu ako se otkrije XSS napad.
• report=uri: Određuje URL na koji preglednik treba poslati izvješće ako se otkrije XSS napad.

Referrer-Policy

Referrer-Policy zaglavlje kontrolira količinu informacija o upućivaču koje se šalju sa zahtjevima. Informacije o upućivaču mogu se koristiti za praćenje korisnika na različitim web stranicama, tako da njihova kontrola može poboljšati privatnost korisnika.

Primjer zaglavlja: Referrer-Policy: strict-origin-when-cross-origin

Neke uobičajene vrijednosti:

• no-referrer: Nikada ne šaljite Referer zaglavlje.
• no-referrer-when-downgrade: Ne šaljite Referer zaglavlje na izvore bez TLS-a (HTTPS).
• origin: Šaljite samo izvor (shema, host i luka) u Referer zaglavlju.
• origin-when-cross-origin: Šaljite izvor za cross-origin zahtjeve i puni URL za same-origin zahtjeve.
• same-origin: Šaljite Referer zaglavlje za same-origin zahtjeve, ali ne za cross-origin zahtjeve.
• strict-origin: Šaljite samo izvor kada razina sigurnosti protokola ostaje ista (HTTPS na HTTPS), ali ne šaljite zaglavlje na manje sigurno odredište (HTTPS na HTTP).
• strict-origin-when-cross-origin: Šaljite izvor prilikom izvođenja same-origin zahtjeva. Za cross-origin zahtjeve, šaljite izvor samo kada razina sigurnosti protokola ostaje ista (HTTPS na HTTPS), ali ne šaljite zaglavlje na manje sigurno odredište (HTTPS na HTTP).
• unsafe-url: Šaljite puni URL u Referer zaglavlju, bez obzira na izvor. Koristite s krajnjim oprezom, jer ovo može otkriti osjetljive informacije.

Permissions-Policy (ranije Feature-Policy)

Permissions-Policy zaglavlje (ranije poznato kao Feature-Policy) omogućuje razvojnim programerima da selektivno omoguće i onemoguće značajke i API-je preglednika. Ovo može pomoći u smanjenju površine napada vaše aplikacije i poboljšanju privatnosti korisnika.

Primjer zaglavlja: Permissions-Policy: geolocation=()

Ovaj primjer onemogućuje geolokacijski API za web stranicu.

Ostale značajke koje se mogu kontrolirati s Permissions-Policy uključuju:

• camera
• microphone
• geolocation
• accelerometer
• gyroscope
• magnetometer
• usb
• midi
• payment
• fullscreen

Postavljanje Sigurnosnih Zaglavaka na Različitim Platformama

Metoda postavljanja sigurnosnih zaglavaka varira ovisno o web poslužitelju ili platformi koju koristite. Evo nekoliko uobičajenih primjera:

Apache

Sigurnosne zaglavke možete postaviti u Apacheu dodavanjem u .htaccess datoteku ili konfiguracijsku datoteku poslužitelja (httpd.conf).

Primjer konfiguracije .htaccess:

<IfModule mod_headers.c>
 Header set Content-Security-Policy "default-src 'self'; script-src 'self' https://cdn.example.com; style-src 'self' 'unsafe-inline'; img-src 'self' data:; report-uri /csp-report"
 Header set Strict-Transport-Security "max-age=31536000; includeSubDomains; preload"
 Header set X-Frame-Options "DENY"
 Header set X-XSS-Protection "1; mode=block"
 Header set Referrer-Policy "strict-origin-when-cross-origin"
</IfModule>

Nginx

Sigurnosne zaglavke možete postaviti u Nginx dodavanjem u server blok u Nginx konfiguracijskoj datoteci (nginx.conf).

Primjer Nginx konfiguracije:

server {
 listen 443 ssl; 
 server_name example.com;

 add_header Content-Security-Policy "default-src 'self'; script-src 'self' https://cdn.example.com; style-src 'self' 'unsafe-inline'; img-src 'self' data:; report-uri /csp-report";
 add_header Strict-Transport-Security "max-age=31536000; includeSubDomains; preload";
 add_header X-Frame-Options "DENY";
 add_header X-XSS-Protection "1; mode=block";
 add_header Referrer-Policy "strict-origin-when-cross-origin";

 ...
}

Node.js (Express)

Sigurnosne zaglavke možete postaviti u Node.js koristeći middleware poput Helmet.

Primjer korištenja Helmet-a:

const express = require('express');
const helmet = require('helmet');

const app = express();

app.use(helmet());

// Prilagodite CSP ako je potrebno
app.use(helmet.contentSecurityPolicy({
 directives: {
 defaultSrc: ["'self'"],
 scriptSrc: ["'self'", "https://cdn.example.com"],
 styleSrc: ["'self'", "'unsafe-inline'"],
 imgSrc: ["'self'", "data:"],
 reportUri: '/csp-report'
 },
}));

app.get('/', (req, res) => {
 res.send('Hello World!');
});

app.listen(3000, () => {
 console.log('Server listening on port 3000');
});

Cloudflare

Cloudflare vam omogućuje postavljanje sigurnosnih zaglavaka korištenjem njihovih Page Rules ili Transform Rules.

Testiranje Vaših Sigurnosnih Zaglavaka

Nakon implementacije sigurnosnih zaglavaka, ključno je testirati ih kako biste bili sigurni da rade ispravno. Nekoliko online alata može vam pomoći analizirati sigurnosne zaglavke vaše web stranice:

• SecurityHeaders.com: Jednostavan i učinkovit alat za analizu sigurnosnih zaglavaka.
• Mozilla Observatory: Sveobuhvatan alat za testiranje sigurnosti web stranica, uključujući sigurnosne zaglavce.
• WebPageTest.org: Omogućuje vam pregled HTTP zaglavaka u waterfall grafikonu.

Zaključak

Sigurnosni zaglavci frontend-a, posebno Politika Sadržaja (CSP), ključni su za zaštitu web aplikacija od raznih napada i poboljšanje sigurnosti korisnika. Pažljivom implementacijom i održavanjem ovih zaglavaka, možete značajno smanjiti rizik od XSS, clickjackinga i drugih sigurnosnih ranjivosti. Zapamtite započeti s politikom report-only, analizirati izvješća o kršenjima, refinirati politiku, a zatim prijeći na način enforce. Redovito nadgledajte i ažurirajte svoje sigurnosne zaglavce kako biste održali svoju web stranicu sigurnom kako se ona razvija i pojavljuju nove prijetnje.

Usvajanjem proaktivnog pristupa frontend sigurnosti, možete graditi sigurnije i pouzdanije web aplikacije koje štite vaše korisnike i vaše poslovanje.